<template>
  <!-- 我的数据资产 -->
  <view class="container">
    <view class="top-view">
      <u-search class="search" :showAction="true" placeholder="搜索" :animation="true" bg-color="black"
                borderColor="darkgray" style="width: 500upx;"></u-search>
      <uni-icons type="folder-add" size="40" color="#d3d3d3" @click="navTo('/pages/asset/addFile')"></uni-icons>

    </view>


    <view class="progress-box">
      <u-line-progress :percentage="(spaceData.usedSpace / spaceData.space) * 100" :showText="false" active-color="#fdf265"></u-line-progress>
      <text class="progress-box-text">重要数据存储空间：{{spaceData.usedSpace||0}}GB / {{spaceData.space||0}}GB</text>
    </view>


    <!-- 导航栏 -->
    <view class="navbar">
      <view v-for="(item, index) in navList" :key="index" class="nav-item"
            :class="{current: tabCurrentIndex === index}" @click="tabClick(index)">
        {{ item.text }}
      </view>

    </view>

    <view class="box">

      <view v-for="(item,index) in list" class="grid-item-box" :key="index"
            v-if="tabCurrentIndex===0 || item.status+1===navList[tabCurrentIndex].state"
            @click="toDetail(item.status,item.id)">
        <image :src="item.iconUrl || defaultImage" class="image" mode="aspectFill"/>
        <view style="padding: 0 10px;">
          <view class="text">
            <text>{{ item.name || "未命名" }}</text>
          </view>
          <view class="text-t-box">
            <text class="text-darkgray">{{ item.updateTime }}</text>
            <tag v-if="item.status===0" :text="'已上架'" :type="'success'" :class="'tag-green'"></tag>
            <tag v-if="item.status===1" :text="'未上架'" :type="'warning'" :class="'tag-yellow'"/>
            <tag v-if="item.status===2" :text="'审核中'" :type="'primary'" :class="'tag-blue'"></tag>
          </view>
          <text class="text-darkgray">查看详情></text>
        </view>
      </view>
    </view>


  </view>


</template>

<script>


import { mapState } from 'vuex';
import {
  getProductionList
} from '@/api/product';
import tag from "@/components/min/tag.vue";

export default {
  computed: {
    ...mapState(['spaceData','userInfo'])
  },
  data() {
    return {
      defaultImage: '/static/index/img.png',
      text: '审核中',
      keyword: '',
      tabCurrentIndex: 0,
      noData: false,
	  code:null,
      list: [

      ],
      navList: [{
        state: 0,
        text: '全部',
        loadingType: 'more',

      },
        {
          state: 1,
          text: '已上架',
          loadingType: 'more',

        },
        {
          state: 2,
          text: '未上架',
          loadingType: 'more',

        },
        {
          state: 3,
          text: '审核中',
          loadingType: 'more',

        },

      ],
      params: {
        pageNum: 1,
        pageSize: 10,
        //ownUserId:this.userInfo.userId,
      },

    }
  },

  components: {
    tag
  },
  onLoad() {
    this.loadData();
  },

  // 上拉加载
  onReachBottom() {

    this.params.pageNum++;

    this.loadData(); // 获取的数据列表

  },
  // 下拉刷新
  onPullDownRefresh() {
    this.params.pageNum = 1;
    this.loadData(); // 获取的数据列表
    uni.showToast({
      title: '刷新成功',
      icon: 'success',
      duration: 2000
    })
    uni.stopPullDownRefresh(); // 停止刷新
  },


  methods: {
    navTo(url) {
      uni.navigateTo({
        url
      })
    },

    // 获取产品信息
    async loadData() {
      try {
        let productList = await getProductionList(this.params);
		console.log(productList);
        if (productList.code !== 200) {
          throw new Error(productList.msg || '请求出错');
        }
        this.list = this.list.concat(productList.rows);
      } catch (error) {
        console.error('请求出错：', error);
        // 处理请求出错的情况，例如显示错误提示或者进行其他操作
        uni.showToast({
          title: error.message || '请求出错，请稍后重试',
          icon: 'none',
          duration: 2000
        });
      }
    },


    // 跳转详情页面
    toDetail(status,id) {
		// 上架
     if(status===0){
		 uni.navigateTo({
		 		url: `/pages/asset/listed?id=${id}`
		 })
	 }else if(status===1){
		 uni.navigateTo({
		 		url: `/pages/asset/productDetails?id=${id}`
		 })
	 }else{
		 uni.navigateTo({
		 		url: `/pages/asset/auditing?id=${id}`
		 })
	 }

    },

    tabClick(index) {
      this.tabCurrentIndex = index;
      console.log("index" + this.tabCurrentIndex);
    },
  }
}
</script>

<style lang="scss">
.container {

  padding: 20upx;

  margin-top: 20upx;

  .top-view {
    display: flex;
  }

  .progress-box {

    background: linear-gradient(to right, #b64cf8, #6a33c8);
    border-radius: 25upx;
    margin: 25upx 0 ;
    padding: 40upx;


    .progress-box-text {
      color: #b4b4b4;

    }

  }
}


.grid-box {
  margin: 20upx 0;

}


.box {
  display: flex;
  flex-wrap: wrap;

  .grid-item-box {
    background-color: rgba(#9E9DBA, 0.2);
    width: 345upx;
    margin-top: 20upx;
    padding-bottom: 20upx;
    border-radius: $border-raidus;

    &:nth-child(2n+1) {
      margin-right: 3%;
    }

    .image {
      width: 100%;
      height: 280upx;
      border-radius: $border-raidus;

    }

    .text {
      color: white;
      margin: 15upx 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .text-t-box {


      justify-content: space-between;
      padding-right: 15upx;
      margin-bottom: 20upx;

    }


  }
}


.navbar {
  display: flex;
  height: 40px;
  padding: 0 5px;
  background: #000000;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
  position: relative;
  z-index: 10;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: $font-base;
    color: darkgray;
    position: relative;

    &.current {
      color: white;
      font-size: $font-base +10upx;

      &:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -12%;
        transform: translateX(-50%);
        width: 50upx;
        height: 60upx;
        border-radius: 100%;
        border-bottom: 3px solid #00aaff;
      }
    }
  }
}
</style>
